// TableComponent , the phx prefix is to differentiate it from the bootstrap one
.tabular {
  &-column-name {
    padding-right: 0;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-column-id {
    color: $color-gray-800;
  }

  &-column-bytes {
    text-align: right;
    white-space: nowrap;
  }

  &-search {
    float: right;
    ::placeholder {
      color: $color-gray-600;
    }
  }
}

.custom-select {
  background-color: $color-gray;
  border-radius: $border-radius;
  border-width: 0;
}

@media (max-width: map-get($grid-breakpoints, lg)) {
  .tabular {
    font-size: 0.85rem;

    &-card {
      border-radius: 0;
      margin-left: -2rem;
      margin-right: -2rem;
    }

    &-column-name {
      max-width: 150px;
    }
  }
}
